import React, { useState, useEffect, ReactText } from 'react'
import './style.scss'
import { Layout, Menu } from 'antd'
import { withRouter, RouteComponentProps, Link } from 'react-router-dom'
import { HomeMainState } from '../../views/home/main'
import { HOME_SIDER_MENU_LIST } from '../../constants/menu'
import logo from '../../assets/img/common/logo.png'

const { Sider } = Layout
// 	子菜单的菜单项
const { SubMenu } = Menu

type Props = HomeMainState & RouteComponentProps

const SideBar: React.FC<Props> = function ({ location, collapsed }: Props) {
  // 当前选中的菜单项 key
  const [selectedKeys, setSelectedKeys] = useState('')
  // 当前展开的 SubMenu 菜单项 key 数组
  const [openkeys, setOpenkeys] = useState<string[]>([])

  function handleOpenChange(openKeys: any) {
    setOpenkeys(openKeys)
  }
  useEffect(() => {
    const pathname = location.pathname
    // split() 方法用于把一个字符串分割成字符串数组。
    // 判断当前路径是否是三级路由，例如：/home/capitalFlow/type
    const fragment = pathname.split('/').slice(0, 3)
    const prefixPath = fragment.join('/')
    if (fragment.length === 3) {
      for (let i = 0; i < HOME_SIDER_MENU_LIST.length; i++) {
        const menu = HOME_SIDER_MENU_LIST[i]
        if (Array.isArray(menu.children)) {
          const index = menu.children.findIndex(
            item => location.pathname === item.path,
          )
          if (index !== -1) {
            setSelectedKeys(menu.children[index].name)
            setOpenkeys([menu.name])
            break
          }
        }
        // 如果路径为 /home/setting/base （HOME_SIDER_MENU_LIST有个第一级的元素的path是/home/setting/base）
        if (menu.path.indexOf(prefixPath) !== -1) {
          setSelectedKeys(menu.name)
          break
        }
      }
    }
  }, [location.pathname])
  return (
    <Sider
      className="sidebar"
      trigger={null}
      collapsible
      collapsed={collapsed}
      width={190}
    >
      {/* 收缩side则显示logo */}
      <div className="sider-menu-logo">
        {collapsed ? <img src={logo} alt="" /> : 'Carefree Admin'}
      </div>
      {/* selectedKeys	当前选中的菜单项 key 数组，key是Menu.Item的唯一标志 */}
      {/* openKeys	当前展开的 SubMenu 菜单项 key 数组 */}
      <Menu
        selectedKeys={[selectedKeys]}
        openKeys={openkeys}
        onOpenChange={handleOpenChange}
        mode="inline"
        theme="dark"
      >
        {HOME_SIDER_MENU_LIST.map(item => {
          if (Array.isArray(item.children)) {
            return (
              <SubMenu
                key={item.name}
                icon={item.icon}
                title={
                  <>
                    <span>{item.name}</span>
                  </>
                }
              >
                {item.children.map(subItem => (
                  <Menu.Item key={subItem.name}>
                    <Link to={subItem.path}>{subItem.name}</Link>
                  </Menu.Item>
                ))}
              </SubMenu>
            )
          }
          return (
            <Menu.Item key={item.name} icon={item.icon}>
              <Link to={item.path}>
                <span>{item.name}</span>
              </Link>
            </Menu.Item>
          )
        })}
      </Menu>
    </Sider>
  )
}

export default withRouter(SideBar)
